<template>
    <dv-border-box-12 class="EntireHospitalBox">
        <div class="d-flex pt-2 pl-2">
            <div class="d-flex">
                <span><i class="iconfont icon-tongji4" /></span>
                <span class="mx-2">{{title}}</span>
            </div>
        </div>
        <!-- 使用动态生成的唯一 id -->
        <div class="d-flex jc-center chart-container">
            <div :id="'EntireHospital-pie-' + uniqueId" style="width:445px;height:390px;"></div>
        </div>
    </dv-border-box-12>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
// 引入 ECharts 库
import * as echarts from 'echarts';
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "",
    },
    PieIndex: 
    {
      type:Number,
      default:0
    }
  },
  setup(props) {
    // 生成一个唯一的 id
    const uniqueId = ref(Date.now() + Math.random().toString(36).substr(2, 9));
    const initECharts = () => {
      // 获取 ECharts 容器
      const chartDom = document.getElementById(`EntireHospital-pie-${uniqueId.value}`);
      if (chartDom) {
        const myChart = echarts.init(chartDom);
        // 配置项
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%' // 修改这里，在数值后面加上 %
          },
          legend: {
            orient: 'horizontal', // 水平排列
            bottom: 5, // 放置在底部
            left: 'center', // 水平居中
            width: 'auto', // 宽度自适应
            textStyle: {
              color: 'white'
            }
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['65%', '80%'],
              label: {
                show: false // 隐藏数据标签
              },
              labelLine: {
                show: false // 隐藏正常状态下的引导线
              },
              avoidLabelOverlap: false,
              center: ['50%', '45%'],
              data:GetchangePieData(props.PieIndex),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                labelLine: {
                  show: false
                },
              },
            }
          ]
        };

        // 使用配置项显示图表
        myChart.setOption(option);
      }
    };

    onMounted(() => {
      // 在组件挂载后初始化 ECharts 实例
      initECharts();
    });
    const GetchangePieData = (num: number) => {
    let result = [];
      switch (num) {
         case 1:
          result = [
  
      { value: 30, name: '博士' },
      { value: 12, name: '硕士' },
      { value: 15, name: '本科' },
      { value: 10, name: '大专' },
      ]
          break;
          case 2:
          result =[
      { value: 10, name: '主任护师' },
      { value: 15, name: '主管护士' },
      { value: 12, name: '副主任护士' },
      { value: 30, name: '护士' }
      ]
          break;
          case 3:
          result = [
      { value: 10, name: 'N0' },
      { value: 15, name: 'N1' },
      { value: 12, name: 'N2' },
      { value: 30, name: 'N3' },
      { value: 30, name: 'N4' },
      { value: 30, name: '护士长人数' }
      ]
          break;
          case 4:
          result = [
      { value: 10, name: '<1' },
      { value: 15, name: '1<=y<2' },
      { value: 12, name: '2<=y<5' },
      { value: 30, name: '5<=y<10' },
      { value: 40, name: '10<=y20' },
      { value: 50, name: '>=20' }
      ]
          break;
          default:
          result=[];
          break;
      }
      return result;
    };
    return {
      uniqueId,
      GetchangePieData
    };
  }
});
</script>

<style>
.EntireHospitalBox {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.chart-container {
    flex: 1;
}
</style>